<template>
  <view class="uni-margin-wrap">
    <swiper
      class="swiper"
      circular
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
    >
      <swiper-item>
        <image
          src="https://img2.baidu.com/it/u=4159100856,1610780650&fm=253&fmt=auto&app=138&f=JPEG?w=991&h=310"
          mode="scaleToFill"
        />
      </swiper-item>
      <swiper-item>
        <image
          src="https://img1.baidu.com/it/u=2474516694,2008946301&fm=253&fmt=auto&app=138&f=JPEG?w=950&h=475"
          mode="scaleToFill"
        />
      </swiper-item>
      <swiper-item>
        <image
          src="https://hbimg.b0.upaiyun.com/eaac6f35d20ed39c0b2feae25ae438f172c1a1152e166-OjTbVZ_fw658"
          mode="scaleToFill"
        />
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup lang="ts">
const indicatorDots = true
const autoplay = true
const interval = 2000
const duration = 500
let background: ['color1', 'color2', 'color3']
</script>

<style lang="scss">
.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}
.swiper {
  height: 300rpx;
}
.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
}
</style>
